<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <button>点击我</button>
    <div class="exchange"></div>
    <script>
        //模板字符串 
        //ES5 : 字符串 拼接   单双引号混用  转义字符使用

        // var str = "我的名字是\"张三\",我的年龄是\"22\""
        // console.log(str); // 我的名字是"张三",我的年龄是"22"

        // var htmlStr = "<div>" +
        //     "我是div" +
        //     "</div>"
        // document.body.innerHTML = htmlStr;

        // console.log(htmlStr); // <div>我是div</div>

        //ES6模板字符串  : 定义 `字符串`
        //插值表达式 可以解析js里的变量,还可以解析 有返回值的表达式
        // var a = 1 + 1;
        // var flag = true;
        // var myname = flag ? "张三" : "李四";

        // function fn() {
        //     return "Tony";
        // }
        // let str = `我${fn()}的名字是${flag?"张三":"李四"},我的年龄是${1+4}`;
        // console.log(str);//我Tony的名字是张三,我的年龄是5


        let btn = document.querySelector("button");
        let flag = true;
        btn.onclick = () => {
            flag = !flag;
            console.log(flag);
            var divEl = `<div style="color:${flag?'red':'blue'}">我是div</div>`;
            document.querySelector(".exchange").innerHTML = divEl;
        }
    </script>
</body>

</html>